<template>
  <div class="owenCancel" >
    <div class="trueCancel">
      <span class="fa fa-search"></span>
      <input type="text" placeholder="搜索喜欢的内容"> 搜索
    </div>
    <div class="searchNav">
      <tab class="ctop" active-color="#fc378c" v-model="index">
        <tab-item
          class="vux-center"
          :selected="demo2 === item"
          v-for="(item, index) in list"
          @click="demo2 "
          :key="index"
        >{{item}}</tab-item>
      </tab>
      <swiper class="nu" v-model="index" height="200vw" :show-dots="false">
        <swiper-item class="cNav" v-for="(item, index) in list" :key="index">
          <div v-if="index==0" class="tab-swiper vux-center">ewew</div>
          <div v-if="index==1" class="tab-swiper vux-center">dsafsadfdsafs</div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>
<script>
import {
  Tab,
  TabItem,
  Sticky,
  Divider,
  XButton,
  Swiper,
  SwiperItem
} from "vux";
const list = () => ["句子", "作者", "出处", "用户"];
export default {
  data() {
    return {
      list: list(),
      demo2: "",
      index: 0
    };
  },
  components: {
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  }
};
</script>
<style scoped>
.trueCancel {
  width: 90vw;
  border: 1px solid black;
  margin: 2vw auto;
  text-align: center;
  padding: 2vw;
  position: relative;
  font-size: 4vw;
  color: rgb(230, 227, 227);
}
.trueCancel span {
  position: absolute;
  left: 7vw;
  top: 3.5vw;
  font-size: 4vw;
}
.trueCancel input {
  width: 80%;
  padding: 1vw;
  text-align: center;
  border-radius: 5vw;
}
::-webkit-input-placeholder {
  color: rgb(230, 227, 227);
}
:-moz-placeholder {
  color: rgb(230, 227, 227);
  opacity: 1;
}
::-moz-placeholder {
  color: rgb(230, 227, 227);
  opacity: 1;
}
:-ms-input-placeholder {
  color: rgb(230, 227, 227);
}
</style>
